---
title: Divider
description: Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.
docType: Demo
docGroup: Components
group: Presentation
alias: [Separator]
components: [Divider]
---

# Divider

Dividers group and separate content within lists and page layouts. The divider
is a thin rule, lightweight yet sufficient to distinguish content visually and
spatially.

## Simple Divider

Create a divider using the `Divider` component.

```demo source="./SimpleDivider.tsx"

```

### Customizing Divider

The color can be configured by the [$SASSDOC](divider-light-theme-color) /
[$SASSDOC](divider-dark-theme-color) / [$SASSDOC](divider-color) Sass variables
or the `--rmd-divider-color` custom property. The default behavior will be to
use the correct light or dark theme color.

The height can be configured by the [$SASSDOC](divider-size) Sass variable or
using the [$SASSDOC](<divider-set-var(size, NEW_SIZE)>) mixin.

The spacing around the divider can be configured by the
[$SASSDOC](divider-spacing) Sass variable or using the
[$SASSDOC](<divider-set-var(spacing, NEW_SIZE)>) mixin.

```demo source="./CustomizingDivider.tsx"

```

### Inset Divider

Enable the `inset` prop to apply additional `margin-left` so it is inset with a
list of items. The inset amount can be configured by the
[$SASSDOC](divider-inset) Sass variable or using the
[$SASSDOC](<divider-set-var(inset, NEW_VALUE)>) mixin.

```demo source="./InsetDivider.tsx"

```

## Vertical Divider

A divider can be rendered vertically instead of horizontally by enabling the
`vertical` prop.

The height will be set to `100%` but can be configured by setting the `height`
through CSS or applying a new `max-size` using the
[$SASSDOC](<divider-set-var(max-size, NEW_SIZE)>) mixin.

The width will be set to [$SASSDOC](divider-size) but can be configured by
setting the `width` through CSS or applying a new `size` using the
[$SASSDOC](<divider-set-var(size, NEW_SIZE)>) mixin.

The margin can be configured by the [$SASSDOC](divider-vertical-spacing) Sass
variable or using the [$SASSDOC](<divider-set-var(vertical-spacing, NEW_SIZE)>)
mixin.

```demo source="./VerticalDivider.tsx"

```
